'use client'

import { 
  Flex, 
  HStack, 
  Text, 
  IconButton, 
  Avatar, 
  useColorModeValue 
} from '@chakra-ui/react';
import { FiX, FiSettings } from 'react-icons/fi';

interface AssistantHeaderProps {
  onClose?: () => void;
  onSettings?: () => void;
}

export const AssistantHeader = ({ onClose, onSettings }: AssistantHeaderProps) => {
  const bgColor = useColorModeValue('gray.50', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  
  return (
    <Flex 
      justify="space-between" 
      align="center" 
      p={3} 
      borderBottom="1px solid" 
      borderColor={borderColor}
      bg={bgColor}
    >
      <HStack>
        <Avatar size="sm" bg="red.400" name="AI" />
        <Text fontWeight="bold">写作助手</Text>
      </HStack>
      
      <HStack>
        {onSettings && (
          <IconButton
            aria-label="设置"
            icon={<FiSettings />}
            size="sm"
            variant="ghost"
            onClick={onSettings}
          />
        )}
        <IconButton
          aria-label="关闭"
          icon={<FiX />}
          size="sm"
          variant="ghost"
          onClick={onClose}
        />
      </HStack>
    </Flex>
  );
}; 